<template>
    <div>
        <el-dialog :title="monthText + '周计划'" :visible.sync="isShow" @close="onClose" width="60%">
            <div class="common-view" v-if="!isShowSign">
                <div class="common-first-view">
                    <div class="first-top-view">
                        <div class="top-title-view">
                            教学目标
                        </div>
                        <div class="top-title-view">
                            任课老师 : {{weekInfo.nick_name}}
                        </div>
                    </div>
                    <div class="bottom-view">
                        {{weekInfo.target}}
                    </div>
                </div>
                <div class="common-first-view">
                    <div class="first-top-view secone-top-view">
                        <div class="top-title-view">
                            教学内容
                        </div>
                    </div>
                    <div class="bottom-view">
                        {{weekInfo.content}}
                    </div>
                </div>
                <div class="common-first-view">
                    <div class="first-top-view secone-top-view">
                        <div class="top-title-view">
                            完成情况
                        </div>
                    </div>
                    <div class="bottom-view">
                        {{weekInfo.completed}}
                    </div>
                </div>
            </div>
            <div class="common-view" v-if="isShowSign">
                <div class="common-first-view">
                    <div class="first-top-view">
                        <div class="top-title-view">
                            教学目标
                        </div>
                        <div class="top-title-view">
                            任课老师 : {{weekInfo.nick_name}}
                        </div>
                    </div>
                    <div v-if="signUrl">
                        <el-image class="header-view" :src="signUrl"></el-image>
                    </div>
                </div>
            </div>
            <div style="margin-top: 15px;margin-bottom: 15px;display: flex;flex-direction: row;justify-content: center">
                <el-pagination
                        :page-size="1" layout="total, prev, pager, next"  :total="total"
                        @current-change="handleCurrentChange" v-if="!isShowSign">
                </el-pagination>
                <el-button style="width: 180px;" type="primary" round @click="querySign" v-if="!isShowSign">查看家长签字</el-button>
                <el-button style="width: 180px;" type="primary" round v-if="isShowSign">确认</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    import {getStudentTeachPlan,getTeachPlanSign} from '@/api/student.js'
    import TimeCalculation from '@/utils/TimeCalculation.js'
    export default {
        props: ['isShowDialog','selectStudentId','selectMonth','selectYear','monthText'],
        data() {
            return {
                total:0,
                planId:'',
                weekInfo:{
                    nick_name:'',
                    completed:'',
                    content:'',
                    target:'',
                },
                weekIndex:1,
                signUrl:'',
                studentId:this.selectStudentId,
                month:this.selectMonth,
                year:this.selectYear,
                isShowSign:false,
                isDisabled: false,
                //   是否显示当前dialog
                isShow: this.isShowDialog,
            }
        },
        watch: {
            monthText:{
                handler(newValue, oldValue) {
                    this.monthText = newValue;
                },
                deep: true
            },
            selectStudentId:{
                handler(newValue, oldValue) {
                    this.studentId = newValue;
                },
                deep: true
            },
            selectMonth:{
                handler(newValue, oldValue) {
                    this.month = newValue;
                },
                deep: true
            },
            selectYear:{
                handler(newValue, oldValue) {
                    this.year = newValue;
                },
                deep: true
            }
        },
        created() {
            this.total = TimeCalculation.getWeeksInMonth(this.selectYear,1)
            this.getWeekPlanInfo();
        },
        computed: {},
        methods: {
            getWeekPlanInfo(){
                let dataForm = {
                    month:this.selectMonth,
                    planType:2,
                    week:this.weekIndex,
                    studentId:this.selectStudentId,
                    year:this.selectYear,
                }
                getStudentTeachPlan(dataForm).then((res) => {
                    console.log(res)
                    if (res.code == 200){
                        if (res.data && res.data.length != 0){
                            this.weekInfo = res.data[0]
                            this.planId = res.data[0].plan_id;
                        }
                    }else{
                        this.$message({
                            type: 'warning',
                            message: res.msg
                        });
                    }
                });
            },
            handleCurrentChange(e){
                console.log(e)
                this.weekIndex = e;
                this.getWeekPlanInfo();
            },
            querySign(){
                if (!this.planId){
                    this.$message({
                        type: 'warning',
                        message: '暂无计划'
                    });
                    return
                }
                getTeachPlanSign({
                    planId:this.planId
                }).then((res) => {
                    if (res.code == 200){
                        this.isShowSign = true;
                        if (res.data && res.data !== " "){
                            this.signUrl = process.env.VUE_APP_BASE_API  + res.data
                        }else{
                            this.signUrl = "";
                        }
                    }else{
                        this.$message({
                            type: 'warning',
                            message: res.msg
                        });
                    }
                });
            },
            //关闭弹窗清空表单
            onClose() {
                this.$emit('closeWeeklyPlan')
            },
            headClass() {
                //表头居中显示
                return "text-align:center;padding:15px";
            },
            rowClass() {
                //表格数据居中显示
                return "text-align:center;padding:15px;";
            },
        },
    }
</script>
<style lang="scss" scoped>

    .common-view {
        width: 100%;
        height: calc(50vh);
        border-radius: 10px;
        padding: 5px;
        display: flex;
        flex-direction: column;
    }

    .common-first-view {
        display: flex;
        flex-direction: column;
        flex: 1;

        .first-top-view {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            margin-bottom: 5px;

            .top-title-view {
                font-size: 0.09rem;
                color: black;
            }
        }

        .header-view {
            width: 100%;
            height:43vh;
            margin-top: 10px
        }

        .bottom-view {
            border: 1px solid #e2e2e2;
            height: 100%;
            border-radius: 10px;
            padding: 15px;
            text-align: left;
        }

        .secone-top-view {
            margin-top: 5px;
        }
    }

    /deep/ .el-dialog__wrapper {
        position: fixed;
        top: 10px;
    }

    /deep/ .el-dialog {
        -webkit-transform: none;
        transform: none;
        text-align: center;
        left: 0;
        position: relative;
        margin: 0 auto;
        border-radius: 15px;
    }

    /deep/ .el-dialog__title {
        line-height: 0.125rem;
        font-size: 0.09375rem;
        color: #303133;
        flex: auto;
        text-align: center;
        font-weight: bold;
    }

    /deep/ .el-dialog__headerbtn .el-dialog__close {
        color: #909399;
        font-size: 0.15rem;
    }

    .examine-view {
        color: #2b2cff;
        border-bottom: 1px solid #2b2cff;
    }

    //隐藏指定 el-table 的水平滚动条
    .hide-scrollbar /deep/ .el-table__body-wrapper::-webkit-scrollbar {
        width: 0 !important;
        height: 0 !important;
        background-color: transparent;
    }

    .hide-scrollbar /deep/ .el-table th.gutter, .el-table td.gutter {
        width: 0px !important;
        border-right-width: 0;
        border-bottom-width: 0;
        padding: 0;
    }

    /deep/ .el-dialog__body {
        padding: 1% 0.10417rem;
    }

    /* 隐藏表格底部横线 */
    /deep/ .el-table::after {
        height: 0 !important;
    }
</style>

